<template>
  <div class="info-container">
    <div class="content">
      <div class="info-title">{{ props.title }}</div>
      <el-descriptions
        :column="props.column || 2"
        border
        :colon="true"
        class="descriptions"
      >
        <div v-for="(item, i) in props.detailItems" :key="i">
          <el-descriptions-item
            v-if="ifShow(item)"
            :span="item.column"
            class="descriptions-item"
          >
            <template #label>
              <span v-show="item.require" class="colorRed">*</span>
              {{ item.label }}
            </template>
            <span v-if="item.type == 'formatDict'">
              <span>
                {{ formatDictCode(item.formatDictCode, value[item.valueName]) }}
              </span>
            </span>
            <span v-else-if="item.type == 'upload'">
              <pub-upload
                disabled
                :key="value[item.valueName]"
                :allowUploadTypes="item.uploadTypes || ['jpg', 'jpeg', 'png']"
                v-model:bizId="value[item.valueName]"
                :limit="item.uploadLimit || '5'"
                :file-size="item.FileSize || 8"
              />
            </span>
            <span v-else-if="item.type == 'slot'">
              <slot :name="item.slotName"></slot>
            </span>
            <span v-else>
              {{ value[item.valueName] || '---' }}
            </span>
          </el-descriptions-item>
        </div>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatDictCode } from '@/utils/format.js'
// import { useUserStore } from '@/pinia/modules/user'
// import { appCurrentState } from '@/pinia/modules/app'

const props = defineProps({
  // detailItems 配置项
  /* [{
     label: '证件类型', // 值label
     valueName: 'idType', // 值value
     type: 'formatDict',  // formatDict(字典) // upload(上传) // slot(插槽) 不配置则为普通字段展示
     formatDictCode: 'C0015', // 
     isShow:'custom', // 值为custom时自定义是否显示的条件，需传isShowConditions
     column:2 // 当前项所占列数
  }] */
  detailItems: {
    type: Object,
    default: {}
  },
  // title 详情标题
  title: {
    type: String,
    default: '标题'
  },
  // column 当前详情所占列数
  column: {
    type: Number,
    default: 2
  },
  // value 值
  value: {
    type: [Number, String, Boolean, Object, Array]
  },
  // isShowConditions 判断是否显示的条件
  /*
  [{
      valueName: 'handicapNumber', // 需要判断的字段
      conditions: state.formData.handicap == 1 // 判断是否展示的条件
    }]
  */
  isShowConditions: {
    type: Array,
    require: false
  }
})

const ifShow = item => {
  return item.isShow == 'custom'
    ? props.isShowConditions?.filter(el => el.valueName == item.valueName)[0]
        ?.conditions
    : true
}

onMounted(() => {
})
onBeforeMount(() => {})
</script>
<style scoped lang="scss">
:deep(.el-descriptions__label) {
  width: 200px !important;
}
.info-container {
  margin: 0 auto 20px auto;
  .content {
    width: 100%;
    margin-right: 20px;
  }
  .pic-content {
    width: 100%;
  }
  .info-title {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px !important;
    color: #606266;
    position: relative;
    left: 10px;
    height: 18px;
    line-height: 18px;
    &::before {
      content: '';
      position: absolute;
      width: 5px;
      height: 18px;
      background-color: #126cff;
      left: -10px;
      top: 0px;
    }
    .titleTips {
      position: absolute;
      left: 61px;
      top: 50%;
      display: flex;
      align-items: center;
      font-size: 12px;
      transform: translateY(-50%);
      color: #606266;
      .el-icon {
        color: goldenrod;
        font-size: 18px;
      }
      a {
        color: #29d;
      }
    }
  }
}
</style>
